<template>
    <div class="user-info-form asset-info-form">
        <el-form label-width="150px" :model="videoBaseInfoForm" :rules="videoBaseInfoFormRules" ref="videoBaseInfoForm" @submit.native.prevent>
            <el-form-item label="关联业主单位：" prop='orgId'>
                <el-select filterable @change="getBuildList" v-model="videoBaseInfoForm.orgId">
                    <el-option
                        v-for="item in orgList"
                        :key="item.organizationId"
                        :label="item.shortName"
                        :value="item.organizationId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关联建筑物：" prop='buildId'>
                <tree-select
                    v-model="videoBaseInfoForm.buildId"
                    filterable
                    :width="386"
                    :data="buildOptions"
                    :defaultProps="buildDefaultProps"
                    :checkedKeys="defaultCheckedBuildId"
                    :nodeKey="buildNodeKey">
                </tree-select>
            </el-form-item>
            <el-form-item label="是否重点：" prop='isImportant'>
                <el-select v-model="videoBaseInfoForm.isImportant">
                    <el-option label="请选择" value=""></el-option>
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="视频外形：" prop='videoShape'>
                <el-select v-model="videoBaseInfoForm.videoShape">
                    <el-option
                        v-for="item in videoShapeOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label-width="0" class="verifyidentity-button">
                <el-button @click.stop="closeFun" round>取消</el-button>
                <el-button type="primary" @click="saveVideoInfo('videoBaseInfoForm')" round>保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import TreeSelect from '@/libs/TreeSelect/Main'
import util from '@/utils/util'
import { getFbsTree } from '@/api/fbs'
import { updateOrgIdAndBuild } from '@/api/sysConfig'

export default {
    name: 'VideoBaseInfo',
    components: {
        TreeSelect
    },
    props: {
        orgList: {},
        videoInfo: {
            type: Object
        },
        closeFun: {
            type: Function,
            required: true
        },
    },
    data() {
        return {
            // 建筑物选项
            buildOptions: [],
            buildDefaultProps: {
                children: 'nodes',
                label: 'text',
                value: 'id'
            },
            buildNodeKey: 'id',
            defaultCheckedBuildId: [],
            // 视频外形选项
            videoShapeOptions:  [],
            // 表单数据
            videoBaseInfoForm: {
                orgId: this.videoInfo.organizationId,
                buildId: this.videoInfo.relateObjId,
                isImportant: String(this.videoInfo.isImportant),
                videoShape: this.videoInfo.shape
            },
            // 表单校验
            videoBaseInfoFormRules: {
                orgId: [
                    { required: true, message: '请选择关联业主单位', trigger: 'change' }
                ],
                buildId: [
                    { required: true, message: '请选择关联建筑物', trigger: 'change' }
                ],
                isImportant: [
                    { required: true, message: '请选择是否重点', trigger: 'change' }
                ],
                videoShape: [
                    { required: true, message: '请选择视频外形', trigger: 'change' }
                ],
            }
        }
    },
    created() {
        let that = this

        that.getBuildList(() => {
            that.defaultCheckedBuildId = that.videoInfo.relateObjId == 0 ? [] : that.videoInfo.relateObjId.toString().split(',')
        })
        // 获取视频外形
        util.ilinkArrHandle.delDicArr_keyVal(54, (arr) => {
            that.videoShapeOptions.push.apply(that.videoShapeOptions, arr)
        })
    },
    methods: {
        // 获取建筑物结构
        getBuildList(callback) {
            let that = this
            getFbsTree({
                organizationId: that.videoBaseInfoForm.orgId
            }).then(res => {
                that.buildOptions = res.data.length === 0 ? [] : res.data
                that.$nextTick(() => {
                    if(callback) {
                        callback()
                    }
                })
            })
        },
        // 保存
        saveVideoInfo(formName) {
            // 阻止事件冒泡
            event.stopPropagation()
            let that = this
            let type = 1
            let parames = {}
            // 校验表单
            that.$refs[formName].validate((valid) => {
                if(valid) {
                    // 处理type字段
                    if(that.videoBaseInfoForm.orgId == this.videoInfo.organizationId) {
                        if(that.videoBaseInfoForm.buildId == this.videoInfo.relateObjId) {
                            type = 3
                        } else if(that.videoBaseInfoForm.orgId == '') {
                            type = 1
                        } else if(that.videoBaseInfoForm.buildId == '') {
                            type = 1
                        } else {
                            type = 2
                        }
                    } else {
                        if(that.videoBaseInfoForm.buildId == this.videoInfo.relateObjId) {
                            type = 1
                        } else if(that.videoBaseInfoForm.orgId == '') {
                            type = 1
                        } else if(that.videoBaseInfoForm.buildId == '') {
                            type = 1
                        } else {
                            type = 3
                        }
                    }
                    parames = {
                        id: that.videoInfo.id,
                        isImportant: that.videoBaseInfoForm.isImportant,
                        organizationId: that.videoBaseInfoForm.orgId,
                        relateObjId: that.videoBaseInfoForm.buildId,
                        relateObjType: 2,
                        shape: that.videoBaseInfoForm.videoShape,
                        type: type
                    }
                    // 调用保存接口
                    updateOrgIdAndBuild(parames).then(res => {
                        if(res.status === 200) {
                            that.$message({
                                message: '保存成功！',
                                type: 'success'
                            })
                            // 关闭弹框
                            that.closeFun(true)
                        } else {
                            that.$message({
                                message: '保存失败！',
                                type: 'warning'
                            })
                        }
                    })
                } else {
                    return false
                }
            })
        }
    }
}
</script>
